<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jstl/core_rt"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="f" %>
<%@ taglib uri="/mytag" prefix="yjd"%>
<script src="${requestScope.FPWEB.staticRootPath }/Js/Plugins/Echarts/echarts-all.js"></script>
<body>

<div class="wrap">
    <div class="nav">
        <ul class="cc">
            <li><a href='<yjd:url url="/depo/stist/index"/>'>存管数据</a></li>
            <li><a href='<yjd:url url="/depo/stist/investing"/>'>在投用户数</a></li>
            <li class="current"><a href='<yjd:url url="/depo/stist/loss"/>'>流失用户数</a></li>
        </ul>
    </div>
    <div class="h_a">流失用户数</div>
    <div class="search_type cc">
        <label>时段：</label>
        <select id="timeType" class="mr10">
            <option value="1" selected="selected">日</option>
            <option value="2">周</option>
            <option value="3">月</option>
        </select>
        <label>对比时段：</label>
        <input id="timeFrom" type="input" min="${start }" max="${end }" class="input length_1 mr10 J_date" value="${end }">
        <button type="button" class="btn length_1" onclick="update()">查询</button>
    </div>
    <div id="main" style="height:460px"></div>
    </div>
</div>

<script type="text/javascript">
    function update() {
        $.ajax({
            url: '<yjd:url url="/depo/stist/getLossNums"/>',
            async: true,
            type: "POST",
            data: { timeType: $("#timeType").val(), timeFrom: $("#timeFrom").val() },
            dataType: "json",
            success: function (data) {
                var myChart = echarts.init(document.getElementById('main'));
                var option = {
                    title: {
                        text: '流失用户数',
                        subtext: data["legend"][0]
                    },
                    tooltip : {
                        trigger: 'axis'
                    },
                    grid:{
                        height:'50%'
                    },
                    legend: {
                        data:data["legend"]
                    },
                    toolbox: {
                        show : true,
                        feature : {
                            magicType : {show: true, type: ['line', 'bar']},
                            restore : {show: true},
                            saveAsImage : {show: true}
                        }
                    },
                    calculable : true,
                    dataZoom : {
                        show : true,
                        realtime : true,
                        start : 00,
                        end : 100
                    },
                    xAxis : [
                        {
                            type : 'category',
                            data : data["xAxis"]
                        }
                    ],
                    yAxis : [
                        {
                            type : 'value'
                        }
                    ],
                    series : [
                        {
                            name:data["series"][0]["name"],
                            type:'line',
                            data:data["series"][0]["data"]
                        }
                    ]
                };
                myChart.setOption(option);
            }
        });
    }
</script>
</body>

